<#import "../tpl/pageTep.ftl" as page>
<@page.pageBase currentMenu="订单详情">
<style>
  .control-group p {
    margin: 0 0 0 20px;
    float: left;
    font-size: 10px;
    text-align: left;
    line-height: 30px;
  }

  .order-details {
    width: 100%;
  }

  .order {
    width: 60%;
    float: left;
  }

  .panel-header {
    color: #333333;
    background-color: #f5f5f5;
    border-color: #dddddd;
  }

  .button-large {
    padding: 10px 30px;
    font-size: 16px;
  }
</style>
<div class="xm-offline">
  <div class="row">
    <div class="panel">
      <div class="form-horizontal">
        <div class="panel-header">
          <a onclick="window.history.go(-1)">返回上一级</a>
        </div>
        <div class="panel-body">

          <h3>订单详情</h3>
          <hr>
          <div class="order-details">
            <div class="order">
              <div class="control-group">
                <label class="control-label">
                  订单号：
                </label>

                <p>${e.orderID!}</p>
              </div>
              <div class="control-group">
                <label class="control-label">
                  订单时间：
                </label>

                <p>${e.createTime!}</p>
              </div>
              <div class="control-group">
                <label class="control-label">
                  买家帐号：
                </label>

                <p>${e.userName!}</p>
              </div>
              <div class="control-group">
                <label class="control-label">
                  订单状态：
                </label>

                <p>已完成</p>
              </div>
            </div>
          </div>
        </div>
        <div class="panel-body">
          <h3>菜单清单</h3>
          <hr>
          <div id="grid"></div>
        </div>
        <div class="panel-body">
          <h3>费用信息</h3>
          <hr>
          <form id="detailForm" class="form-horizontal">
            <div class="control-group">
              <label class="control-label">
                <s>*</s>
                使用优惠：
              </label>

              <div class="controls">
                <input type="text" class="control-text span-width span8" value="" id="discount"
                       disabled>
              </div>
            </div>
            <div class="control-group">
              <label class="control-label">
                <s>*</s>
                收益支付：
              </label>

              <div class="controls">
                <input type="text" class="control-text span-width span8" value="${e.income!}"
                       disabled>
              </div>
            </div>
            <div class="control-group">
              <label class="control-label">
                <s>*</s>
                余额支付：
              </label>

              <div class="controls">
                <input type="text" class="control-text span-width span8" value="${e.balance!}"
                       disabled>
              </div>
            </div>
            <div class="control-group">
              <label class="control-label">
                <s>*</s>
                实际支付：
              </label>

              <div class="controls">
                <input type="text" class="control-text span-width span8" value="${e.ptotal!}"
                       disabled>
              </div>
            </div>
          </form>
        </div>
        <div class="panel-body">
          <h3>用餐信息</h3>
          <hr>
          <form id="detailForm" class="form-horizontal">
            <div class="control-group">
              <label class="control-label">
                <s>*</s>
                用餐方式：
              </label>

              <div class="controls">
                <input type="text" class="control-text span-width span8" value="" id="typeInput"
                       disabled>
              </div>
            </div>

            <div class="type-in">
              <div class="control-group">
                <label class="control-label">
                  <s>*</s>
                  叫餐店铺：
                </label>
                <div class="controls">
                  <input type="text" class="control-text span-width span8" value="${e.storeName!}"
                         disabled>
                </div>
              </div>
              <div class="control-group">
                <label class="control-label">
                  <s>*</s>
                  用餐人：
                </label>

                <div class="controls">
                  <input type="text" class="control-text span-width span8" value="${e.userName!}"
                         disabled>
                </div>
              </div>
              <div class="control-group">
                <label class="control-label">
                  <s>*</s>
                  用餐地址：
                </label>

                <div class="controls">
                  <input type="text" class="control-text span-width span8" value="${e.addressArea!}${e.addressDetail!}"
                         disabled>
                </div>
              </div>
              <div class="control-group">
                <label class="control-label">
                  <s>*</s>
                  联系电话：
                </label>

                <div class="controls">
                  <input type="text" class="control-text span-width span8" value="${e.addressPhone!}"
                         disabled>
                </div>
              </div>
            </div>
            <div class="type-out">
              <div class="control-group">
                <label class="control-label">
                  <s>*</s>
                  用餐店铺：
                </label>
                <div class="controls">
                  <input type="text" class="control-text span-width span8" value="${e.storeName!}"
                         disabled>
                </div>
              </div>
              <div class="control-group">
                <label class="control-label">
                  <s>*</s>
                  用餐桌号：
                </label>

                <div class="controls">
                  <input type="text" class="control-text span-width span8" value="${e.seatNumber!}"
                         disabled>
                </div>
              </div>
              <div class="control-group">
                <label class="control-label">
                  <s>*</s>
                  排队号：
                </label>

                <div class="controls">
                  <input type="text" class="control-text span-width span8" value="${e.lineUpNumber!}"
                         disabled>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  var Grid = BUI.Grid,
    Store = BUI.Data.Store,
    columns = [
      {title: '商品名称', dataIndex: 'productName', elCls: 'center', width: '20%'},
      {
        title: '商品图片', dataIndex: 'productPicture', elCls: 'center', width: '20%', renderer: function (value) {
          return '<img src="/' + value + '" style="width:110px;height:110px"/>';
        }
      },
      {title: '商品规格', dataIndex: 'specInfo', elCls: 'center', width: '20%'},
      {title: '下单数量', dataIndex: 'number', elCls: 'center', width: '20%'},
      {title: '商品单价', dataIndex: 'price', elCls: 'center', width: '20%'}
    ];

  var store = new Store({
      url: '/rest/manage/order/selectOrderDetail',
      autoLoad: true, //自动加载数据
      params: { //配置初始请求的参数
        length: '10',
        orderID: '${e.orderID!}'
      },
      pageSize: 10,	// 配置分页数目
      root: 'data',
      totalProperty: 'total'
    }),
    grid = new Grid.Grid({
      render: '#grid',
      columns: columns,
      loadMask: true, //加载数据时显示屏蔽层
      store: store,
      plugins: [Grid.Plugins.CheckSelection], // 插件形式引入多选表格
      // 底部工具栏
      bbar: {
        pagingBar: true
      }
    });
  grid.render();

  var form = new BUI.Form.Form({
    srcNode: '#detailForm'
  }).render();
  form.on('beforesubmit', function (ev) {
    if (!form.isValid()) {
    }
  });

  var type = '${e.type!}',
    voucherName = '${e.voucherName!}',
    discount = '${e.discount!}';
  //查询订单类型
  switch (type) {
    case 'in':
      $(".type-out").show();
      $(".type-in").hide();
      $("#typeInput").val('线下点餐');
    case 'out':
      $(".type-out").hide();
      $(".type-in").show();
      $("#typeInput").val('外卖点餐');

  }
  //判断打折是否有值，没有值的情况下，取值 voucherName优惠卷
  if (discount == '' || discount == null) {
    $("#discount").val(voucherName);
  } else {
    $("#discount").val('无');
  }
</script>
</@page.pageBase>
